<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CH">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link href="${applicationScope.basePath}/css/goods_detail.css" rel="stylesheet">
    <link href="${applicationScope.basePath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<div class="detail-box stark-components z-depth-1 row" style="margin-top: 80px;">

    <ol class="breadcrumb">
        <li><a href="${applicationScope.basePath}/goods/category"><span
                class="glyphicon glyphicon-hand-right"></span>${requestScope.catelog.name}</a></li>
        <li class="active">${requestScope.goodsExtend.goods.name}</li>
    </ol>
    <div class="row" style="height: 40px;">
        <div class="col-md-6" style="margin-top: 0px;">

            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                    <ol class="carousel-indicators">
                        <c:forEach items="${requestScope.goodsExtend.imageList}" var="item" varStatus="vs">
                            <c:if test="${vs.index == 0}">
                                <li data-target="#myCarousel" data-slide-to="${vs.index}" class="active"></li>
                            </c:if>
                            <c:if test="${vs.index != 0}">
                                <li data-target="#myCarousel" data-slide-to="${vs.index}"></li>
                            </c:if>
                        </c:forEach>
                    </ol>
                    <c:forEach items="${requestScope.goodsExtend.imageList}" var="item" varStatus="vs">
                        <c:if test="${vs.count == 1}">
                            <div class="item active" style="width: auto;height: 450px;">
                                <a href="#">
                                    <img src="${applicationScope.imgPath}/${item.imgUrl}" alt="..." width="100%"
                                         height="100%">
                                </a>
                            </div>
                        </c:if>
                        <c:if test="${vs.count != 1}">
                            <div class="item">
                                <a href="#">
                                    <img src="${applicationScope.imgPath}/${item.imgUrl}" alt="..." width="100%"
                                         height="100%">
                                </a>
                            </div>
                        </c:if>
                    </c:forEach>
                    <a href="#myCarousel" data-slide="prev" class="carousel-control left"><!-- ‹ -->
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a><!-- 左箭头 -->
                    <a href="#myCarousel" data-slide="next" class="carousel-control right"><!-- › -->
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a><!-- 右箭头 -->
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <span class="item-name">${requestScope.goodsExtend.goods.name}</span><br/>
            <h4 id="singlePrice" class="item-price">￥${requestScope.goodsExtend.goods.price}</h4>
            <h5 class="publisher-info-title">数量：<span id="goods_num"
                                                      style="">${requestScope.goodsExtend.goods.number}</span></h5>
            <h5 class="publisher-info-title">原价：￥<span
                    style="text-decoration:line-through;">${requestScope.goodsExtend.goods.real_price}</span></h5>
            <c:if test="${empty sessionScope.activeUser}">
                <div class="item-contact">
                    <p class="not-login">
                        <a href="${applicationScope.basePath}/login">登录</a>
                        <em>或</em>
                        <a href="${applicationScope.basePath}/register">注册</a>
                        <em>后查看联系信息</em>
                    </p>
                </div>
            </c:if>
            <c:if test="${!empty sessionScope.activeUser}">
            <div class="item-contact">
                <div>
                    <div class="value"><span style="color: #ffc53d;"
                                             class="glyphicon glyphicon-user"></span>${requestScope.seller.userName}
                    </div>
                </div>
                <div>
                    <c:if test="${!empty requestScope.seller.phone}">
                        <div class="value"><span style="color: #ffc53d;"
                                                 class="glyphicon glyphicon-phone"></span>${requestScope.seller.phone}
                        </div>
                    </c:if>
                    <c:if test="${empty requestScope.seller.phone}">
                    <div class="value"><span style="color: #ffc53d;" class="glyphicon glyphicon-phone"></span>此用户未提供手机号码
                        </c:if>
                    </div>
                    <div>
                        <div class="value"><span style="color: #ffc53d;"
                                                 class="glyphicon glyphicon-envelope"></span>${requestScope.seller.email}
                        </div>
                    </div>
                    <div id="buyBox">
                        <c:if test="${requestScope.goodsExtend.goods.number != 0}">
                            <input type="button" value="加入购物车" class="blue lighten-1 waves-effect waves-light btn"
                                   id="btn_cart"
                                   onclick="addFocus(${requestScope.goodsExtend.goods.id})"/>
                            <input type="button" value="立即购买" class="blue lighten-1 waves-effect waves-light btn"
                                   id="btn_buy" data-toggle="modal" data-target="#orderInfo"/>
                            <input type="button" value="收藏" class="blue lighten-1 waves-effect waves-light btn"
                                   id="btn_notice" onclick="collection(${requestScope.goodsExtend.goods.id});"/>
                        </c:if>
                        <c:if test="${requestScope.goodsExtend.goods.number == 0}">
                            <h3 style="color: #db5e5e;">暂无余货，请联系卖家</h3>
                        </c:if>
                    </div>
                </div>
                </c:if>
                <h1 class="item-pub-time">发布于 ${requestScope.goodsExtend.goods.publish_time}</h1>
            </div>
        </div>
    </div>
    <div class="detail-box stark-components z-depth-1 row">
        <h1 class="title">商品描述</h1>
        <hr class="hr1"/>
        <hr class="hr2"/>
        <p class="section">${requestScope.goodsExtend.goods.describle}</p>
    </div>
    <div class="row detail-area">
        <div class="clo s12">
            <div ng-controller="commentController" class="comment stark-components z-depth-1">
                <div class="title">评论</div>
                <hr class="hr1"/>
                <hr class="hr2"/>
                <form id="addCommentForm" class="form-horizontal" action="#">
                    <div class="comment-add row">
                        <div class="input-field col s12">
                            <input id="goodsId" name="goods_id" value="${requestScope.goodsExtend.goods.id}"
                                   type="hidden"/>
                            <div class="input-group">
                                <c:if test="${!empty sessionScope.activeUser}">
                                    <input id="sub_input" type="text" name="content" class="form-control"
                                           placeholder="在这里写下评论">
                                    <span class="input-group-btn"><button class="btn btn-warning"
                                                                          onclick="addComments();"
                                                                          type="button">发布</button></span>
                                </c:if>
                                <c:if test="${empty sessionScope.activeUser}">
                                    <input type="text" name="content" class="form-control" placeholder="在这里写下评论">
                                    <span class="input-group-btn" title="你需要先登录哦"><button class="btn btn-warning"
                                                                                          disabled="disabled"
                                                                                          type="button">发布</button></span>
                                </c:if>
                            </div>
                        </div>
                    </div>
                </form>
                <hr/>
                <div id="comments">
                    <div id="comment_list" class="comment-collection">
                        <c:if test="${!empty sessionScope.activeUser}">
                            <c:forEach items="${requestScope.goodsExtend.commentsList}" var="item">
                                <div class="comment-item ng-scope">
                                    <div class="comment-main-content">
                                        <em class="name ng-binding">${item.userName}:</em>
                                        <em class="ng-binding">${item.content}</em>
                                    </div>
                                    <div class="comment-function">
                                        <em class="time ">${item.create_at}</em>
                                    </div>
                                </div>
                            </c:forEach>
                        </c:if>
                        <c:if test="${empty sessionScope.activeUser}">
                            <div class="comment-item ng-scope">
                                <p style="text-align: center;"><a style="color: #db5e5e;" href="${applicationScope.basePath}/pages/login.jsp">登录</a>后才能查看评论</p>
                            </div>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="orderInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="height: 50px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">确认订单信息<span id="order_num"
                                                    style="color: red;font-size: 14px;margin-left: 20px;"></span></h4>
            </div>
            <div class="modal-body">
                <form id="orderForm" action="#"
                      style="margin:0 auto;width: 80%;">
                    <input type="text" hidden="hidden" name="goods_id" value="${requestScope.goodsExtend.goods.id}">
                    <div class="form-group">
                        <label for="name">用户名</label>
                        <input type="text" disabled="disabled" name="userName"
                               value="${sessionScope.activeUser.userName}" id="name" class="form-control"
                               placeholder="">
                    </div>
                    <div class="form-group form-group-options" style="width: 35%;">
                        <label for="1inp">数量</label><span id="error_num"
                                                          style="color: red;">[商品总数]：${requestScope.goodsExtend.goods.number}</span>
                        <div id="1" class="input-group input-group-option quantity-wrapper">
                                <span class="input-group-addon input-group-addon-remove quantity-remove btn">
                                    <span id="removeBtn" class="glyphicon glyphicon-minus"></span>
                                </span>
                            <input id="1inp" disabled="disabled" type="number" value="1" name="need_num"
                                   class="form-control quantity-count"
                                   placeholder="1">
                            <span class="input-group-addon input-group-addon-remove quantity-add btn">
                                    <span id="addBtn" class="glyphicon glyphicon-plus"></span>
                                </span>
                        </div>
                    </div>
                    <div class="form-group" style="width: 35%;">
                        <label>交易金额：</label><label id="price_label"
                                                   style="color: red;font-weight: bold;font-size: 16px;">￥${requestScope.goodsExtend.goods.price}</label>
                    </div>
                    <div class="form-group">
                        <label for="address">交易地址</label>
                        <input type="text" required="required" name="address" id="address" class="form-control"
                               placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input type="text" name="phone" required="required" id="phone"
                               value="${sessionScope.activeUser.phone}"
                               class="form-control" placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="note">备注</label><span class="pull-right">/50</span><span class="pull-right"
                                                                                             id="textarea_str_num">50</span>
                        <input id="note" rows="1" onkeydown="limit_number();" maxlength="50" name="order_note" id="note"
                               class="form-control" placeholder=""/>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="height: 70px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sub_orders" form="orderForm" type="submit" class="btn btn-primary">支付</button>
            </div>
        </div>
    </div>
</div>
<footer>
    <hr/>
    <p style="text-align: center;">&copy; 二手交易平台 2020</p>
</footer>
<script src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
<script src="${applicationScope.basePath}/js/jquery.form.min.js"></script>
<script type="text/javascript">
    /* 评论 */
    function addComments() {
        let data = JSON.stringify($("#addCommentForm").serializeJSON());
        $.ajax({
            url: '${applicationScope.basePath}/goods/comments/pub',
            type: 'POST',
            data: data,
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                // 评论保存成功
                if (data.flag) {
                    $("#sub_input").val('');
                    // 添加评论到页面
                    $("#comment_list").prepend("<div class=\"comment-item ng-scope\">\n" +
                        "                                <div class=\"comment-main-content\">\n" +
                        "                                    <em class=\"name ng-binding\">" + data.datas.userName + ":</em>\n" +
                        "                                    <em class=\"ng-binding\">" + data.datas.content + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"comment-function\">\n" +
                        "                                    <em class=\"time \">" + data.datas.create_at + "</em>\n" +
                        "                                </div>\n" +
                        "                            </div>");
                } else {
                    alert(data.datas.errorMsg);
                }
            },
            error: function () {
                alert('请求超时或系统出错!');
            }
        });
    }


    /*加入购物车*/
    function addFocus(id) {
        $.ajax({
            url: '${applicationScope.basePath}/user/addNotice/' + id,
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                if (data.flag) {
                    $("#cart_num").text(data.datas);
                    alert("添加成功，在购物车等你呦！");
                } else {
                    alert(data.errorMsg);
                }
            },
            error: function () {
                alert('请求超时或系统出错!');
            }
        });
    }

    /*收藏*/
    function collection(id) {
        $.ajax({
            url: '${applicationScope.basePath}/user/collection/' + id,
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                if (data.flag) {
                    alert("收藏成功！");
                } else {
                    alert(data.errorMsg);
                }
            },
            error: function () {
                alert('请求超时或系统出错!');
            }
        });
    }

    /**/
    $(function () {
        /*提交订单*/
        $("#orderForm").submit(function (encodedURIComponent) {
            $("#sub_orders").button("loading");
            //获取表单信息,转化为json对象
            let json = $("#orderForm").serializeJSON();
            // 将json数据，增加到json对象中
            json.need_num = '' + $("#1inp").val();
            // 将json对象，转发为字符串
            let data = JSON.stringify(json);
            $.ajax({
                url: "${applicationScope.basePath}/orders/add",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: data,
                success: function (data) {
                    if (data.flag) {
                        $('#orderForm').resetForm();
                        $("#error_num").text('[商品总数]：' + data.datas.goods_num);
                        $("#goods_num").text(data.datas.goods_num);
                        $("#order_num").text('提交成功，[订单编号]：' + data.datas.order_num);
                        if (data.datas.goods_num === '0') {
                            $("#buyBox").empty();
                            $("#buyBox").append(" <h3 style=\"color: #db5e5e;\">暂无余货，请联系卖家</h3>");
                        }
                    } else {
                        alert(data.errorMsg);
                    }
                    $("#sub_orders").button('reset');
                },
                error: function (data) {
                    //跳转到错误页面
                }
            });
            return false;
        });

        /*增加商品数量*/
        $("#addBtn").on("click", function () {
            let num = parseInt($("#1inp").val()) + 1;
            let str = $("#price_label").text();
            let str1 = $("#singlePrice").text();
            let price = parseInt(str.substring(str.lastIndexOf('￥') + 1));
            let singlePrice = parseInt(str1.substring(str1.lastIndexOf('￥') + 1));
            if (num <= ${requestScope.goodsExtend.goods.number}) {
                $("#1inp").val(num);
                $("#price_label").text('￥' + (price + singlePrice));
            }
        });
        /*减少商品数量*/
        $("#removeBtn").on("click", function () {
            let num = parseInt($("#1inp").val()) - 1;
            let str = $("#price_label").text();
            let str1 = $("#singlePrice").text();
            let price = parseInt(str.substring(str.lastIndexOf('￥') + 1));
            let singlePrice = parseInt(str1.substring(str1.lastIndexOf('￥') + 1));
            if (num > 0) {
                $("#1inp").val(num);
                $("#price_label").text('￥' + (price - singlePrice));
            }
        });

    });

    //限制文本域中的字符数
    function limit_number(event) {
        $('#textarea_str_num').text(50 - ($('#note').val().length));
    }
</script>
</body>
</html>